﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>模式窗口</title>
    <link href="../twiModalWindow/twiModalWindow-1.0.0.min.css" rel="stylesheet" />
    <script src="../../jquery-1.8.3.min.js"></script>
</head>
<body>
    <button id="btnShowModal"  class="twi-md-btn twi-md-btn-red">显示模式窗口</button>
    <div class="twi-md-modal twi-md-effect-1" id="modal-1">
		<div class="twi-md-content twi-md-bg-red">
			<h3>Modal Dialog</h3>
			<div>
				<p>This is a modal window. You can do the following things with it:</p>
				<ul>
					<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
					<li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
					<li><strong>Close:</strong> click on the button below to close the modal.</li>
				</ul>
				<button class="twi-md-btn twi-md-btn-red twi-md-close">Close me!</button>
			</div>
		</div>
	</div>
    <div class="twi-md-overlay twi-md-overlay-red"></div><!-- the overlay element -->
    <script type="text/javascript">
      $(function () {
        var modal = $('#modal-1');
        $('#btnShowModal').click(function () {
          modal.addClass('twi-md-show');
        });
        //关闭按钮
        $('.twi-md-close').click(function (ev) {
          ev.stopPropagation();
          modal.removeClass('twi-md-show');
        });
      });         
    </script>
</body>
</html>
